<!--颜色选择组件-->
<template>
  <div class="content-color">
    <div class="name">{{ title }}</div>
    <div class="color"> <el-color-picker v-model="color" show-alpha /> </div>
  </div>
</template>

<script setup>
const props = defineProps({
  //标题
  title: {
    type: String,
    required: true,
  },
});
//颜色
const color = defineModel("color", {
  type: String,
  required: true,
});
</script>

<style scoped lang="less">
.content-color {
  padding: 20px 0;
  //公共标题
  .name {
    font-size: 18px;
    color: #351d1d;
    font-weight: 400;
    margin-bottom: 14px;
  }
  //颜色选择
  .color {
    display: flex;
    align-items: center;
    :deep(.el-color-picker) {
      margin-right: 14px;
      .el-color-picker__trigger {
        width: 110px;
        height: @InputHeight;
        padding: 0;
        i.el-icon.el-color-picker__icon.is-icon-arrow-down {
          display: none;
        }
      }
    }
  }
}
</style>
